Konfiguracija TypeScript: Obvladovanje možnosti prevajalnika TSConfig

Datoteka tsconfig.json je srce vsakega projekta TypeScript. Narekuje, kako prevajalnik TypeScript (tsc) pretvori vaše datoteke .ts v JavaScript. Dobro konfigurirana datoteka tsconfig.json je ključna za ohranjanje kakovosti kode, zagotavljanje združljivosti v različnih okoljih in optimizacijo postopka gradnje. Ta izčrpen vodnik se poglobi v napredne možnosti tsconfig.json, kar vam omogoča natančno nastavitev projektov TypeScript za vrhunsko zmogljivost in vzdržljivost.

Razumevanje osnov: Zakaj je TSConfig pomemben

Preden se poglobimo v napredne možnosti, ponovimo, zakaj je tsconfig.json tako pomemben:

• Nadzor prevajanja: Določa, katere datoteke naj bodo vključene v vaš projekt in kako naj se prevedej.
• Preverjanje tipa: Določa pravila in strokovnost preverjanja tipov, kar vam pomaga zgodaj v razvojnem ciklu ujeti napake.
• Nadzor izhoda: Določa ciljno različico JavaScripta, sistem modula in izhodno mapo.
• Integracija IDE: Zagotavlja dragocene informacije IDE-jem (kot so VS Code, WebStorm itd.) za funkcije, kot so dokončanje kode, označevanje napak in refaktoriranje.

Brez datoteke tsconfig.json bo prevajalnik TypeScript uporabil privzete nastavitve, ki morda niso primerne za vse projekte. To lahko privede do nepričakovanega vedenja, težav z združljivostjo in manj kot idealne izkušnje z razvojem.

Ustvarjanje vašega TSConfig: Hiter začetek

Če želite ustvariti datoteko tsconfig.json, preprosto zaženite naslednji ukaz v korenskem imeniku vašega projekta:

            tsc --init
            

              
                Copy
              
            
          

To bo ustvarilo osnovno datoteko tsconfig.json z nekaterimi pogostimi možnostmi. Nato lahko to datoteko prilagodite, da bo ustrezala posebnim zahtevam vašega projekta.

Ključne možnosti prevajalnika: Podroben pregled

Datoteka tsconfig.json vsebuje objekt compilerOptions, kjer konfigurirate prevajalnik TypeScript. Raziščimo nekaj najpomembnejših in najpogosteje uporabljenih možnosti:

target

Ta možnost določa ciljno različico ECMAScript za prevedeno kodo JavaScript. Določa, katere funkcije JavaScripta bo prevajalnik uporabil, kar zagotavlja združljivost s ciljnim okoljem (npr. brskalniki, Node.js). Običajne vrednosti vključujejo ES5, ES6 (ES2015), ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext. Uporaba ESNext bo ciljala na najnovejše podprte funkcije ECMAScript.

Primer:

            "compilerOptions": {
  "target": "ES2020"
}
            

              
                Copy
              
            
          

Ta konfiguracija bo prevajalniku naročila, naj ustvari kodo JavaScript, združljivo z ECMAScript 2020.

module

Ta možnost določa sistem modula, ki se bo uporabljal v prevedeni kodi JavaScript. Običajne vrednosti vključujejo CommonJS, AMD, System, UMD, ES6 (ES2015), ES2020 in ESNext. Izbira sistema modula je odvisna od ciljnega okolja in modula za nalaganje, ki se uporablja (npr. Node.js, Webpack, Browserify).

Primer:

            "compilerOptions": {
  "module": "CommonJS"
}
            

              
                Copy
              
            
          

Ta konfiguracija je primerna za projekte Node.js, ki običajno uporabljajo sistem modulov CommonJS.

lib

Ta možnost določa nabor datotek knjižnic, ki jih je treba vključiti v postopek prevajanja. Te datoteke knjižnic zagotavljajo definicije tipov za vgrajene API-je JavaScript in API-je brskalnika. Običajne vrednosti vključujejo ES5, ES6, ES7, DOM, WebWorker, ScriptHost in še več.

Primer:

            "compilerOptions": {
  "lib": ["ES2020", "DOM"]
}
            

              
                Copy
              
            
          

Ta konfiguracija vključuje definicije tipov za ECMAScript 2020 in API DOM, ki je bistven za projekte, ki temeljijo na brskalniku.

allowJs

Ta možnost omogoča prevajalniku TypeScript, da prevede datoteke JavaScript skupaj z datotekami TypeScript. To je lahko koristno pri selitvi projekta JavaScript v TypeScript ali pri delu z obstoječimi kodnimi bazami JavaScript.

Primer:

            "compilerOptions": {
  "allowJs": true
}
            

              
                Copy
              
            
          

S to omogočeno možnostjo bo prevajalnik obdelal datoteke .ts in .js.

checkJs

Ta možnost omogoča preverjanje tipov za datoteke JavaScript. V kombinaciji z allowJs omogoča TypeScriptu, da prepozna potencialne napake v tipih v vaši kodi JavaScript.

Primer:

            "compilerOptions": {
  "allowJs": true,
  "checkJs": true
}
            

              
                Copy
              
            
          

Ta konfiguracija zagotavlja preverjanje tipov za datoteke TypeScript in JavaScript.

jsx

Ta možnost določa, kako naj se sintaksa JSX (ki se uporablja v Reactu in drugih ogrodjih) pretvori. Običajne vrednosti vključujejo preserve, react, react-native in react-jsx. preserve pusti sintakso JSX, kot je, react jo pretvori v klice React.createElement, react-native je za razvoj React Native in react-jsx jo pretvori v funkcije tovarne JSX. react-jsxdev je za namene razvoja.

Primer:

            "compilerOptions": {
  "jsx": "react"
}
            

              
                Copy
              
            
          

Ta konfiguracija je primerna za projekte React, ki pretvarjajo JSX v klice React.createElement.

declaration

Ta možnost ustvari datoteke deklaracij (.d.ts) za vašo kodo TypeScript. Datoteke deklaracij zagotavljajo informacije o tipih za vašo kodo, kar drugim projektom TypeScript ali projektom JavaScript omogoča uporabo vaše kode z ustreznim preverjanjem tipov.

Primer:

            "compilerOptions": {
  "declaration": true
}
            

              
                Copy
              
            
          

Ta konfiguracija bo ustvarila datoteke .d.ts skupaj s prevedenimi datotekami JavaScript.

declarationMap

Ta možnost ustvari datoteke izvorne karte (.d.ts.map) za ustvarjene datoteke deklaracij. Izvorne karte omogočajo razhroščevalnikom in drugim orodjem, da se vrnejo na izvirno izvorno kodo TypeScript pri delu z datotekami deklaracij.

Primer:

            "compilerOptions": {
  "declaration": true,
  "declarationMap": true
}
            

              
                Copy
              
            
          

sourceMap

Ta možnost ustvari datoteke izvorne karte (.js.map) za prevedeno kodo JavaScript. Izvorne karte omogočajo razhroščevalnikom in drugim orodjem, da se vrnejo na izvirno izvorno kodo TypeScript pri razhroščevanju v brskalniku ali drugih okoljih.

Primer:

            "compilerOptions": {
  "sourceMap": true
}
            

              
                Copy
              
            
          

outFile

Ta možnost združi in izda vse izhodne datoteke v eno datoteko. To se običajno uporablja za združevanje kode za aplikacije, ki temeljijo na brskalniku.

Primer:

            "compilerOptions": {
  "outFile": "dist/bundle.js"
}
            

              
                Copy
              
            
          

outDir

Ta možnost določa izhodno mapo za prevedene datoteke JavaScript. Če ni določeno, bo prevajalnik postavil izhodne datoteke v isto mapo kot izvorne datoteke.

Primer:

            "compilerOptions": {
  "outDir": "dist"
}
            

              
                Copy
              
            
          

Ta konfiguracija bo postavila prevedene datoteke JavaScript v mapo dist.

rootDir

Ta možnost določa korenski imenik projekta TypeScript. Prevajalnik uporablja ta imenik za razreševanje imen modulov in ustvarjanje poti do izhodnih datotek. To je še posebej uporabno za kompleksne strukture projektov.

Primer:

            "compilerOptions": {
  "rootDir": "src"
}
            

              
                Copy
              
            
          

removeComments

Ta možnost odstrani komentarje iz prevedene kode JavaScript. To lahko pomaga zmanjšati velikost izhodnih datotek.

Primer:

            "compilerOptions": {
  "removeComments": true
}
            

              
                Copy
              
            
          

noEmitOnError

Ta možnost preprečuje, da bi prevajalnik izdal datoteke JavaScript, če so zaznane napake v tipih. S tem se zagotovi, da se generira samo veljavna koda.

Primer:

            "compilerOptions": {
  "noEmitOnError": true
}
            

              
                Copy
              
            
          

strict

Ta možnost omogoča vse stroge možnosti preverjanja tipov. To je zelo priporočljivo za nove projekte, saj pomaga pri odkrivanju potencialnih napak in uveljavljanju najboljših praks.

Primer:

            "compilerOptions": {
  "strict": true
}
            

              
                Copy
              
            
          

Omogočanje strogega načina je enakovredno omogočanju naslednjih možnosti:

• noImplicitAny
• noImplicitThis
• alwaysStrict
• strictNullChecks
• strictFunctionTypes
• strictBindCallApply
• noImplicitReturns
• noFallthroughCasesInSwitch

esModuleInterop

Ta možnost omogoča interoperabilnost med moduloma CommonJS in ES. Omogoča vam uvoz modulov CommonJS v module ES in obratno.

Primer:

            "compilerOptions": {
  "esModuleInterop": true
}
            

              
                Copy
              
            
          

forceConsistentCasingInFileNames

Ta možnost uveljavlja dosledne velike in male črke v imenih datotek. To je pomembno za združljivost med platformami, saj so nekateri operacijski sistemi občutljivi na velike in male črke, drugi pa ne.

Primer:

            "compilerOptions": {
  "forceConsistentCasingInFileNames": true
}
            

              
                Copy
              
            
          

baseUrl in paths

Te možnosti vam omogočajo konfiguriranje resolucije modula. baseUrl določa osnovni imenik za razreševanje ne-relativnih imen modulov, paths pa vam omogoča, da določite prilagojene vzdevke modulov.

Primer:

            "compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "@components/*": ["src/components/*"],
    "@utils/*": ["src/utils/*"]
  }
}
            

              
                Copy
              
            
          

Ta konfiguracija vam omogoča uvoz modulov z vzdevki, kot sta @components/MyComponent in @utils/myFunction.

Napredna konfiguracija: Onkraj osnov

Zdaj raziščimo nekaj naprednih možnosti tsconfig.json, ki lahko dodatno izboljšajo vašo izkušnjo razvoja TypeScript.

Inkrementalno prevajanje

TypeScript podpira inkrementalno prevajanje, kar lahko znatno pospeši postopek gradnje za velike projekte. Če želite omogočiti inkrementalno prevajanje, nastavite možnost incremental na true in določite možnost tsBuildInfoFile.

Primer:

            "compilerOptions": {
  "incremental": true,
  "tsBuildInfoFile": ".tsbuildinfo"
}
            

              
                Copy
              
            
          

Možnost tsBuildInfoFile določa datoteko, kamor bo prevajalnik shranil informacije o gradnji. Te informacije se uporabljajo za določanje, katere datoteke je treba ponovno prevesti med naslednjimi gradnjami.

Reference projekta

Reference projekta vam omogočajo, da svojo kodo strukturirate v manjše, bolj obvladljive projekte. To lahko izboljša čase gradnje in organizacijo kode za velike kodne baze. Dobra analogija tega koncepta je mikroservisna arhitektura – vsaka storitev je neodvisna, vendar se zanaša na druge v ekosistemu.

Če želite uporabiti reference projekta, morate ustvariti ločeno datoteko tsconfig.json za vsak projekt. Nato lahko v glavni datoteki tsconfig.json določite projekte, na katere se je treba sklicevati z možnostjo references.

Primer:

            {
  "compilerOptions": {
    ...
  },
  "references": [
    { "path": "./project1" },
    { "path": "./project2" }
  ]
}
            

              
                Copy
              
            
          

Ta konfiguracija določa, da je trenutni projekt odvisen od projektov, ki se nahajajo v imenikih ./project1 in ./project2.

Transformatorji po meri

Transformatorji po meri vam omogočajo, da spremenite izhod prevajalnika TypeScript. To je mogoče uporabiti za različne namene, na primer za dodajanje transformacij kode po meri, odstranjevanje neuporabljene kode ali optimizacijo izhoda za določena okolja. Običajno se uporabljajo za i18n internacionalizacijo in naloge lokalizacije.

Če želite uporabiti transformatorje po meri, morate ustvariti ločeno datoteko JavaScript, ki izvozi funkcijo, ki jo bo poklical prevajalnik. Nato lahko datoteko transformatorja določite z možnostjo plugins v datoteki tsconfig.json.

Primer:

            {
  "compilerOptions": {
    ...
    "plugins": [
      { "transform": "./transformer.js" }
    ]
  }
}
            

              
                Copy
              
            
          

Ta konfiguracija določa, da se datoteka ./transformer.js uporablja kot transformator po meri.

Datoteke, vključitev in izključitev

Poleg compilerOptions druge možnosti na ravni korena v tsconfig.json nadzorujejo, katere datoteke so vključene v postopek prevajanja:

• files: Polje poti do datotek, ki jih je treba vključiti v prevajanje.
• include: Polje vzorcev glob, ki določajo datotke, ki jih je treba vključiti.
• exclude: Polje vzorcev glob, ki določajo datotke, ki jih je treba izključiti.

Te možnosti zagotavljajo natančen nadzor nad tem, katere datoteke obdeluje prevajalnik TypeScript. Na primer, iz postopka prevajanja lahko izključite testne datoteke ali ustvarjeno kodo.

Primer:

            {
  "compilerOptions": { ... },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "**/*.spec.ts"]
}
            

              
                Copy
              
            
          

Ta konfiguracija vključuje vse datoteke v imeniku src in njegovih podimenikih, hkrati pa izključuje datoteke v imenikih node_modules in dist ter vse datoteke z razširitvijo .spec.ts (običajno se uporabljajo za enotne teste).

Možnosti prevajalnika za določene scenarije

Različni projekti lahko zahtevajo različne nastavitve prevajalnika za doseganje optimalnih rezultatov. Poglejmo si nekaj posebnih scenarijev in priporočene nastavitve prevajalnika za vsakega.

Razvoj spletnih aplikacij

Za razvoj spletnih aplikacij boste običajno želeli uporabiti naslednje nastavitve prevajalnika:

            {
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true,
    "outDir": "dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
            

              
                Copy
              
            
          

Te nastavitve so primerne za sodobne spletne aplikacije, ki uporabljajo React ali druga podobna ogrodja. Ciljajo na najnovejše funkcije ECMAScript, uporabljajo module ES in omogočajo strogo preverjanje tipov.

Razvoj zaledja Node.js

Za razvoj zaledja Node.js boste običajno želeli uporabiti naslednje nastavitve prevajalnika:

            {
  "compilerOptions": {
    "target": "ESNext",
    "module": "CommonJS",
    "esModuleInterop": true,
    "strict": true,
    "sourceMap": true,
    "outDir": "dist",
    "resolveJsonModule": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
            

              
                Copy
              
            
          

Te nastavitve so primerne za aplikacije Node.js, ki uporabljajo sistem modulov CommonJS. Ciljajo na najnovejše funkcije ECMAScript, omogočajo strogo preverjanje tipov in vam omogočajo uvoz datotek JSON kot module.

Razvoj knjižnice

Za razvoj knjižnice boste običajno želeli uporabiti naslednje nastavitve prevajalnika:

            {
  "compilerOptions": {
    "target": "ES5",
    "module": "UMD",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}
            

              
                Copy
              
            
          

Te nastavitve so primerne za ustvarjanje knjižnic, ki jih je mogoče uporabiti v brskalnikih in okoljih Node.js. Ustvarijo datoteke deklaracij in izvorne karte za izboljšano izkušnjo razvijalca.

Najboljše prakse za upravljanje TSConfig

Tukaj je nekaj najboljših praks, ki jih morate upoštevati pri upravljanju datotek tsconfig.json:

• Začnite z osnovno konfiguracijo: Ustvarite osnovno datoteko tsconfig.json s pogostimi nastavitvami in jo nato razširite v drugih projektih z možnostjo extends.
• Uporabite strogi način: Omogočite strogi način, da ujamete potencialne napake in uveljavite najboljše prakse.
• Konfigurirajte resolucijo modula: Pravilno konfigurirajte resolucijo modula, da se izognete napakam pri uvozu.
• Uporabite reference projekta: Svojo kodo strukturirajte v manjše, bolj obvladljive projekte z uporabo referenc projekta.
• Posodabljajte svojo datoteko tsconfig.json: Redno pregledujte svojo datoteko tsconfig.json in jo posodabljajte, ko se vaš projekt razvija.
• Nadzorujte različico svoje datoteke tsconfig.json: Naložite svojo datoteko tsconfig.json v nadzor različice skupaj z drugimi izvornimi kodami.
• Dokumentirajte svojo konfiguracijo: Dodajte komentarje v svojo datoteko tsconfig.json, da pojasnite namen vsake možnosti.

Zaključek: Obvladovanje konfiguracije TypeScript

Datoteka tsconfig.json je zmogljivo orodje za konfiguriranje prevajalnika TypeScript in nadzor postopka gradnje. Z razumevanjem razpoložljivih možnosti in upoštevanjem najboljših praks lahko natančno prilagodite svoje projekte TypeScript za optimalno zmogljivost, vzdržljivost in združljivost. Ta priročnik je zagotovil izčrpen pregled naprednih možnosti, ki so na voljo v datoteki tsconfig.json, kar vam omogoča popoln nadzor nad vašim potekom dela pri razvoju TypeScripta. Ne pozabite, da vedno preverite uradno dokumentacijo TypeScript za najnovejše informacije in navodila. Ko se vaši projekti razvijajo, bi se moralo razvijati tudi vaše razumevanje in uporaba teh zmogljivih konfiguracijskih orodij. Srečno kodiranje!